<template>
  <div>
    <van-form validate-first @failed="onFailed">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="value1"
        name="pattern"
        placeholder="请输入手机号"
        :rules="[{ pattern, message: '请输入正确内容' }]"
      />
      <van-field
        v-model="value2"
        name="pattern"
        placeholder="密码长度必须大于6位"
        :rules="[{ pattern: pattern1, message: '请输入正确内容' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" @click="fn1"
          >登陆</van-button
        >
      </div>
      <!-- 通过 validator 进行函数校验 -->
      <!-- 通过 validator 进行异步函数校验 -->
    </van-form>
    <span class="getyan" v-if="flag" @click="getyan">获取验证码</span>
    <span class="getyan" v-else>还剩{{num}}秒</span>
  </div>
</template>

<script>
import axios from "axios"
import Vue from "vue";
import { Form } from "vant";
import { Field } from "vant";
import {debounce} from "../utils/debouce"
import { Notify } from 'vant';

Vue.use(Form);
Vue.use(Field);
export default {
  data() {
    return {
    num:3,
      flag:true,
      timmer:null,
      value1: "",
      value2: "",
      pattern1: /\d{6}/,
      pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, // 写正则规则
    };
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
   fn1:debounce(2000,function(){  // 防抖，防止暴力点击
     
        axios.get("/login1",{params:{
            username:this.value1,
            password:this.value2
        }}).then(res=>{
            console.log(res.data);
            if (res.data.code == 1) {
                  this.$router.push("/home")
                  window.localStorage.setItem("islogin","true")
            } else {
                  Notify('用户名密码错误');
                  window.localStorage.setItem("islogin","false")
            }
        })
   }),
   getyan(){
       this.flag = false
       this.timmer = setInterval(()=>{
            this.num -- 
            if ( this.num < 0) {
                    this.num = 0;
                   
            }   
       },1000)
       setTimeout(()=>{
          this.flag = true
          clearInterval(this.timmer)
          this.num = 3
       },3100)
   }
  
  },
};
</script>

<style>
 .getyan {
     position: absolute;
    right: 20px;
    top: 55px;
 }
</style>